<template>
	<view>
		<view class="fui-list-group">
			<view class="fui-list">共{{num}}位客户</view>			
		</view>
		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="item_top">
				<image :src="item.img" mode="widthFix"></image>
				<view>
					<view class="name">{{item.name}} &#8226; <text class="text"> 线索</text></view>
					<view class="time">最近访问 {{item.time}} 来自 {{item.state}}</view>
				</view>
			</view>
			<view class="btn btn-success">添加跟进</view>
			<view class="item_info">
				<view>
					<view>{{item.order}}</view>
					<view>订单</view>
				</view>
				<view>
					<view>{{item.talk}}</view>
					<view>聊天</view>
				</view>
				<view>
					<view>{{item.tel}}</view>
					<view>通话</view>
				</view>
			</view>
			<view class="item_bottom">
				<view>添加标签</view>
				<view class="flex">
					<view class="right">拨打电话</view>
					<view class="right">发消息</view>
				</view>				
			</view>
		</view>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:'1',
				list:[
					{
						img:'/static/images/t.png',
						name:'云溪',
						time:'04-23 12:02',
						state:'J分享的名片',
						order:'0',
						talk:'2',
						tel:'0'
					},
					{
						img:'/static/images/t.png',
						name:'云溪',
						time:'04-23 12:02',
						state:'J分享的名片',
						order:'0',
						talk:'2',
						tel:'0'
					},
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
    .item{
		margin: 30rpx;
		background: #fff;
		border-radius: 10rpx;
		position: relative;
	}
	.btn{
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-size: 24rpx;
		line-height: 50rpx;
	}
	.item_top{
		padding: 30rpx 20rpx;
		display: flex;
	}
	.item_top image{
		width: 80rpx;
		margin-right: 20rpx;
	}
	.item_top .text{
		color: #b7b3b3;
		padding-left: 10rpx;
	}
	.time{
		color: #b7b3b3;
		font-size: 20rpx;
	}
	.item>.time{
		line-height: 38rpx;
		padding:10rpx 20rpx 30rpx;
	}
	.item_top .name{
		margin-bottom: 20rpx;
	}
	.item_info{
		padding:10rpx 20rpx;
		line-height: 38rpx;
		background: #f3f3f3;
		display: flex;
		margin: 0 20rpx 20rpx;
	}
	.item_info>view{
		margin: 10rpx;
		width: 80rpx;
		text-align: center;
	}
	.item_bottom{
		border-top: 1px solid #e8e8e8;
		line-height: 100rpx;
		text-align: right;
		color: #5cb85c;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.item_bottom .flex view{
		padding: 0 10rpx;
	}
</style>
